<template>

  <div class="tag-view">
      <div style="width:100%;white-space: nowrap; position: relative; overflow: hidden;" >
          <el-scrollbar>
           <TagViewItem v-for="item in tabList" :key="item.path" :isOpen="item.isOpen" :path="item.path" :icon="item.icon" :content="item.content" />
          </el-scrollbar>
      </div>
   </div>

</template>

<script>
import { computed, watch, ref, onMounted } from 'vue'
import TagViewItem from './TagViewItem'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
export default {
    name: "TagView",
    components:{
        TagViewItem
    },
    setup(){
        const route = useRoute()
        const {state,dispatch} = useStore()
        

        onMounted(()=>{
            const tabItem = {
                content: route.meta.title,
                icon: route.meta.icon,
                isOpen: true,
                path: route.path
            }
            dispatch('tab/addTab',tabItem)
        })

        watch(()=>route.path,()=>{
            const tabItem = {
                content: route.meta.title,
                icon: route.meta.icon,
                isOpen: true,
                path: route.path
            }
            console.log(tabItem)
            dispatch('tab/addTab',tabItem)
            
        })

        watch(()=>state.tab.index,(val)=>{
            for(const index in state.tab.tabList){
                if(index == val){
                    state.tab.tabList[index].isOpen = true
                }else{
                    state.tab.tabList[index].isOpen = false
                }
            }
        })

        const tabList = computed(()=>{
            return state.tab.tabList
        })

        return {
            tabList
        }
    }
}
</script>

<style lang="scss">
.tag-view{
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
    border-bottom: 1px solid #d8dce5;
    
    .el-scrollbar__view{
        padding: 0 20px !important;
    }

    .el-scrollbar__bar{
        bottom: 0 !important;
    }
}

</style>